<template>
	<div>
		<div id="mynetwork"></div>
		<pre id="eventSpan"></pre>
	</div>
</template>

<script>
	import Vis from 'vis/dist/vis.js'
	import 'vis/dist/vis.css'
	export default {
	  data() {
	      return {
	      	allnodes : [
				        {id: 1,shape: 'image',size: 10, label: 'Node 1', title: 'I have a popup 1!', level: 1, pid: 0, subids: [2, 3, 4],image : './src/assets/plc1.png'},
						{id: 2,shape: 'image',size: 10, label: 'Node 2', title: 'I have a popup 2!', level: 2, pid: 1, subids: [5, 6],image : './src/assets/plc1.png'},
						{id: 3,shape: 'image',size: 10, label: 'Node 3', title: 'I have a popup 3!', level: 2, pid: 1, subids: [7],image : './src/assets/plc1.png'},
						{id: 4,shape: 'image',size: 10, label: 'Node 4', title: 'I have a popup 4!', level: 2, pid: 1, subids: [8],image : './src/assets/plc1.png'},
						{id: 5,shape: 'image',size: 10, label: 'Node 5', title: 'I have a popup 5!', level: 4, pid: 2,image : './src/assets/plc1.png'},
						{id: 6,shape: 'image',size: 10, label: 'Node 6', title: 'I have a popup 6!', level: 4, pid: 2,image : './src/assets/plc1.png'},
						{id: 7,shape: 'image',size: 10, label: 'Node 7', title: 'I have a popup 7!', level: 4, pid: 3,image : './src/assets/plc1.png'},
						{id: 8,shape: 'image',size: 10, label: 'Node 8', title: 'I have a popup 8!', level: 3, pid: 4, subids: [9, 10],image : './src/assets/plc1.png'},
						{id: 9,shape: 'image',size: 10, label: 'Node 9', title: 'I have a popup 9!', level: 4, pid: 8,image : './src/assets/plc1.png'},
						{id: 10,shape: 'image',size: 10, label: 'Node 10', title: 'I have a popup 10!', level: 4, pid: 8,image : './src/assets/plc1.png'}
			    	],
			alledges : [
				        {id: '1_2', from: 1, to: 2, title: 'test12!'},
						{id: '1_3', from: 1, to: 3, title: 'test13!'},
						{id: '1_4', from: 1, to: 4, title: 'test14!'},
						{id: '2_5', from: 2, to: 5, title: 'test25!'},
						{id: '2_6', from: 2, to: 6, title: 'test26!'},
						{id: '3_7', from: 3, to: 7, title: 'test37!'},
						{id: '4_8', from: 4, to: 8, title: 'test48!'},
						{id: '8_9', from: 8, to: 9, title: 'test89!'},
						{id: '8_10', from: 8, to: 10, title: 'test8to10!'}
				    ],
	      };
	    },
	    methods: {
	    },
	    mounted:function(){
	    	let _this = this;
	    	// 创建节点对象
			let nodes = new Vis.DataSet(this.allnodes);
			// 创建连线对象
			let edges = new Vis.DataSet(this.alledges);
			// 创建一个网络拓扑图
			let container = document.getElementById('mynetwork');
			let data = {nodes: nodes, edges: edges};
			let options = {
				interaction: {hover: true}
			};
			let network = new Vis.Network(container, data, options);
			let nodes_data = network.body.data.nodes._data;
			network.on("doubleClick", function(params) {//双击事件
				if (params.nodes.length != 0) {//确定为节点双击事件
					var nodeId = params.nodes[0];
					console.log(getChild(nodeId));
				}
			});
			
			//删除下级所有节点
			function removeChild(nodeId) {
				var chilNodes = getChild(nodeId);
				if (chilNodes.length == 0) {//当前点击的为叶子节点
					//判断是否有下级节点
					if (typeof (_this.allnodes[nodeId - 1][subids]) != undefined) {
						$.each(_this.allnodes[nodeId - 1][subids], function(index, item) {
							nodes.add(_this.allnodes[item - 1]);
							edges.add({id: nodeId + '_' + item, from: nodeId, to: item});
						});
					} else {
						alert(当前为叶子节点);
					}
				} else {
				sub_nodes.forEach(function(index, item) {
					var childNodes = getChild(item);
					if (childNodes.length == 0) {
						nodes.remove({id: item});
						edges.remove({id: nodeId + '_' + item});
					} else {
						removeChild(item);
					}
					nodes.remove({id: item});
					edges.remove({id: nodeId + '_' + item});
				});
				}
			}
			
			
			//获取某节点直属下级节点
			function getChild(nodeId) {
				var arr = [];
				var connectedNodes = network.getConnectedNodes(nodeId);//获取所有连接节点
				connectedNodes.forEach(function(index, item) {
					/*if (item != _this.allnodes[node_id - 1][pid]) {//当前节点的父节点 ，不操作*/
						arr.push(item);
					/*}*/
				});
				return arr;
			}
	    },
	    
	}
</script>

<style>
	#mynetwork {
        width: 800px;
        height: 800px;
        border: 1px solid lightgray;
        margin: 10px auto;
    }
</style>